<template>
  <el-dialog v-model="visible" width="400px" style="margin-top: 30vh !important">
    <template #header>
      <div class="my-header"> 设置 </div>
    </template>

    <el-form ref="formRef" :model="formParams" label-width="120px">
      <!-- <el-form-item
        v-if="!props.type"
        label=""
        prop="type"
        :rules="[{ required: true, message: '请选择', trigger: 'change' }]"
      >
        <el-radio-group v-model="formParams.type">
          <el-radio :value="2" :label="2" size="large">活动时间</el-radio>
          <br />
          <el-radio :value="1" :label="1" size="large">用券时间</el-radio>
        </el-radio-group>
      </el-form-item> -->

      <el-form-item
        label="延长时间设置"
        prop="dayNumber"
        :rules="[{ required: true, message: '', trigger: 'blur' }]"
      >
        <el-input-number
          style="margin-top: 2px"
          @mousewheel.native.prevent
          v-model="formParams.dayNumber"
          :precision="0"
          :min="1"
        /><span style="margin-left: 10px">天</span>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="handleAction(false)">取消</el-button>
      <el-button :loading="submit" type="primary" @click="handleAction(true)"> 确认 </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import {
  extendCouponApi,
  extendExportCouponApi,
  extendReceiveCouponApi
} from '@/api/marketing/activity'

const formRef = ref(null)
const visible = ref(false)
const submit = ref(false)

const emit = defineEmits(['refresh'])
const props = defineProps({
  selectionList: {
    type: Object,
    default: () => []
  },
  type: {
    type: String,
    default: ''
  },
  title: {
    type: String,
    default: ''
  }
})
const formParams = reactive({
  dayNumber: null
  // type: null
})
function handleAction(confirm) {
  if (confirm) {
    formRef.value.validate((valid) => {
      if (valid) {
        submit.value = true
        // 列表延长
        // TODO:根据选择的类型延长
        if (!props.type) {
          extendCouponApi({ couponIds: props.selectionList, ...formParams })
            .then((res) => {
              submit.value = false
              ElMessage({
                message: '操作成功',
                type: 'success'
              })
              formRef.value.resetFields()
              visible.value = false
              emit('refresh')
            })
            .catch((err) => {
              submit.value = false
            })
        } else {
          const params = {
            ...formParams,
            clientCouponIs: [],
            exportIds: []
          }
          if (props.title === '已领取') {
            // 已领取列表延长
            params.clientCouponIs = props.selectionList
            extendReceiveCouponApi(params)
              .then((res) => {
                submit.value = false
                ElMessage({
                  message: '操作成功',
                  type: 'success'
                })
                formRef.value.resetFields()
                visible.value = false
                emit('refresh')
              })
              .catch((err) => {
                submit.value = false
              })
          } else {
            // 导出详情列表延长
            params.exportIds = props.selectionList
            extendExportCouponApi(params)
              .then((res) => {
                submit.value = false
                ElMessage({
                  message: '操作成功',
                  type: 'success'
                })
                formRef.value.resetFields()
                visible.value = false
                emit('refresh')
              })
              .catch((err) => {
                submit.value = false
              })
          }
        }
      }
    })
  } else {
    formRef.value.resetFields()
    visible.value = false
  }
}

const init = () => {
  visible.value = true
}

defineExpose({
  init
})
</script>

<style lang="scss" scoped></style>
